<template>
  <div class="vm-common-item-list">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
      <ul class="content">
        <router-link :to="`/common_details/${item.bid}/公告详情?btn=myoffer&type=${ item.iInquiryFlag == 1 ? '0' : '' }`" tag="li" class="common-item-box" v-for="(item, key) in transactionData" :key="key">
          <div class="idx-warp-l">
            <img src="../../../static/images/vm-common-ltem-list.png" alt="">
          </div>
          <div class="idx-warp-r">
            <div class="idx-r-t">
              <span class="t-content">{{ item.cIBidsTatle }}</span>
              <span class="t-time">{{ item.dCenterDate }}</span>
            </div>
            <div class="idx-r-f">
              <span class="f-area">单位：{{ item.companyName }}</span>
              <span :class="['f-type',item.ClassName]">阶段：{{ item.iRangeStatus }}</span>
            </div>
          </div>
        </router-link>
      </ul>
      <vm-common-noData v-if="!transactionData.length"></vm-common-noData>
    </mt-loadmore>
  </div>
</template>

<script>
import { transactionIndex } from '@/api/businessTransctionCenter.js'
export default {
  data () {
    return {
      transactionPage: 1,
      allLoaded: false,
      transactionData: new Array()
    }
  },
  created () {
    this.getTransactionData(true);
  },
  methods: {
    // 获取已参与需求交易数据
    getTransactionData(loadmoreType) {
      transactionIndex(this.transactionPage, 1).then(res => {
        if ( res.data.data == null || !res.data.data.length) {
          this.allLoaded = true; // 若数据已全部获取完毕
          if (loadmoreType == 'top') {
            this.$refs.loadmore.onTopLoaded();
          } else {
            this.$refs.loadmore.onBottomLoaded();
          }
          return;
        }
        if (!this.transactionData.length || this.transactionPage == 1) {
          this.allLoaded = false;
          this.transactionData = res.data.data;
        } else {
          this.transactionData = this.transactionData.concat(res.data.data);
        }
        if (loadmoreType == 'top') {
          this.$refs.loadmore.onTopLoaded();
        } else {
          this.$refs.loadmore.onBottomLoaded();
        }
        res.data.data.map(item => {
          switch (item.iRangeStatus) {
            case '0':
              item.iRangeStatus = '新创建';
              item.ClassName = 'create';
              break;
            case '1':
              item.iRangeStatus = '公告期';
              item.ClassName = 'announcementPeriod';
              break;
            case '2':
              item.iRangeStatus = '投标期';
              item.ClassName = 'tender';
              break;
            case '3':
              item.iRangeStatus = '评标期';
              item.ClassName = 'bidEvaluationPeriod';
              break;
            case '4':
              item.iRangeStatus = '中标公示期';
              item.ClassName = 'announcementPeriod';
              break;
            case '5':
              item.iRangeStatus = '结束期';
              item.ClassName = 'end';
              break
          }
        })
      });
    },
    loadTop() {
      this.transactionPage = 1;
      this.getTransactionData('top');
    },
    loadBottom () {
      this.transactionPage ++;
      this.getTransactionData('bottom');
    }
  }
}
</script>

<style lang="scss" scoped>
  .vm-common-item-list {
    margin-top: 20px;
    height: calc( 100% - 200px ) !important;
    overflow: scroll !important;
  }
</style>
